<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Crunchy Frog VLAM</title>
</head>
<body>

<p>This file contains a list of examples of VLAM markup.  It is meant as a complement to the <a href="/docs/crunchy_maker/vlam_summary.html">VLAM Summary.</a></p>
<ul><li>Interpreter
<ul>
	<li><a href="#interpreter1">Unprocessed interpreter (code only)</a></li>
	<li><a href="#interpreter2">Styled interpreter (code only)</a></li>
	<li><a href="#interpreter2a">Styled interpreter (code only) with line numbers</a></li>
	<li><a href="#interpreter3">Styled interpreter</a></li>
	<li><a href="#interpreter3a">Styled interpreter with line numbers</a></li>
	<li><a href="#interpreter4">Styled interpreter to editor</a></li>
	<li><a href="#interpreter4a">Styled interpreter to editor with line numbers</a></li>
	<li><a href="#interpreter5">Styled interpreter to sized editor</a></li>
</ul></li>
<li>Basic editor
<ul>
	<li><a href="#editor1">Unprocessed code</a></li>
	<li><a href="#editor2">Styled code</a></li>
	<li><a href="#editor2a">Styled code with line numbers</a></li>
	<li><a href="#editor3">Styled code with editor</a></li>
	<li><a href="#editor3a">Styled code with editor and line numbers</a></li>
	<li><a href="#editor4">Styled code with sized editor</a></li>
	<li><a href="#editor5">No styled code; simply code in editor</a></li>
</ul></li>
<li>Doctests
<ul>
	<li><a href="#doctest2">Styled doctest with sized editor</a></li>
	<li><a href="#doctest2a">Styled doctest with sized editor and line numbers</a></li>
</ul></li>
<li>Graphics: canvas
<ul>
	<li><a href="#canvas1">Styled canvas with sized editor</a></li>
	<li><a href="#canvas1a">Styled canvas with sized editor with line numbers 
and different size drawing area</a></li>
</ul></li>
<li>Graphics: plot
<ul>
	<li><a href="#plot1">Styled plot with sized editor, line numbers and different size drawing area</a></li>
	<li><a href="#plot1a">plot with no code displayed in &lt;pre&gt;</a></li>
</ul></li>
<li>External applications
<ul>
	<li><a href="#external1">External application with console (Python interpreter)</a></li>
	<li><a href="#external2">External application without console (Tkinter window)</a></li>
</ul></li>
<li><a href="#comment">Crunchy comment</a></li>
</ul>

<h2><a id="interpreter1">Unprocessed interpreter (code only):</a><br/> 
<code>&lt;pre&gt;</code></h2>
<pre>
&gt;&gt;&gt; for i in range(11):
...     print i,
...
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter2">Styled interpreter (code only):</a> <br/>
<code>&lt;pre title="py_code interpreter"&gt;</code></h2>
<pre title="py_code interpreter">
&gt;&gt;&gt; for i in range(11):
...     print i,
...
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter2a">Styled interpreter (code only) with line numbers:</a> <br/>
<code>&lt;pre title="py_code interpreter linenumber"&gt;</code></h2>
<pre title="py_code interpreter linenumber">
&gt;&gt;&gt; for i in range(11):
...     print i,
...
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter3">Styled interpreter:</a> <br/>
<code>&lt;pre title="interpreter"&gt;</code></h2>
<pre title="interpreter">
&gt;&gt;&gt; for i in range(11):
...     print i,
... 
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter3a">Styled interpreter with line numbers:</a> <br/>
<code>&lt;pre title="interpreter linenumber"&gt;</code></h2>
<pre title="interpreter linenumber">
&gt;&gt;&gt; for i in range(11):
...     print i,
... 
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter4">Styled interpreter to editor:</a> <br/>
<code>&lt;pre title="interpreter editor"&gt;</code></h2>
<pre title="interpreter editor">
&gt;&gt;&gt; for i in range(11):
...     print i,
... 
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter4a">Styled interpreter to editor with line numbers:</a> <br/>
<code>&lt;pre title="interpreter editor linenumber"&gt;</code></h2>
<pre title="interpreter editor linenumber">
&gt;&gt;&gt; for i in range(11):
...     print i,
... 
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="interpreter5">Styled interpreter to sized editor:</a> <br/>
<code>&lt;pre title="interpreter editor 
size=(4, 40)"&gt;</code></h2>
<pre title="interpreter editor size=(4, 40)">
&gt;&gt;&gt; for i in range(11):
...     print i,
... 
0 1 2 3 4 5 6 7 8 9 10
&gt;&gt;&gt; print "Hello world!"
Hello world!
</pre>

<h2><a id="editor1">Unprocessed code:</a><br/> 
<code>&lt;pre&gt;</code></h2>
<pre>
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="editor2">Styled code:</a><br/> 
<code>&lt;pre title="py_code"&gt;</code></h2>
<pre title="py_code">
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="editor2a">Styled code with line numbers:</a><br/> 
<code>&lt;pre title="py_code linenumber"&gt;</code></h2>
<pre title="py_code linenumber">
for i in range(11):
    print i,
print "Hello world!"
# more lines for good measure




# line numbering alignment should be good until 999
print "Goodbye!"
</pre>


<h2><a id="editor3">Styled code with editor:</a><br/> 
<code>&lt;pre title="editor"&gt;</code></h2>
<pre title="editor">
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="editor3a">Styled code with editor and line numbers:</a><br/> 
<code>&lt;pre title="editor linenumber"&gt;</code></h2>
<pre title="editor linenumber">
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="editor4">Styled code with sized editor:</a><br/> 
<code>&lt;pre title="editor size=(3, 80)"&gt;</code></h2>
<pre title="editor size=(3, 80)">
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="editor5">No styled code; simply code in editor:</a><br/> 
<code>&lt;pre title="editor no-pre size=(3, 80)"&gt;</code></h2>
<pre title="editor no-pre size=(3, 80)">
for i in range(11):
    print i,
print "Hello world!"
</pre>

<h2><a id="doctest2">Styled doctest with sized editor:</a><br/> 
<code>&lt;pre title="doctest size=(5, 60)"&gt;</code></h2>
<pre title="doctest size=(5, 60)">
&gt;&gt;&gt; # Define the following function.
&gt;&gt;&gt; print2()
2
</pre>

<h2><a id="doctest2a">Styled doctest with sized editor and line numbers:</a><br/> 
<code>&lt;pre title="doctest size=(5, 60) linenumber"&gt;</code></h2>
<pre title="doctest size=(5, 60) linenumber">
&gt;&gt;&gt; # Define the following function.
&gt;&gt;&gt; print2()
2
</pre>

<h2><a id="canvas1">Styled canvas with sized editor:</a><br/> 
<code>&lt;pre title="canvas size=(5, 60)"&gt;</code></h2>
<pre title="canvas size=(5, 60)">
for i in range(10):
   for j in range(10):
       r = 255 - 25*i
       g = 255 - 25*j
       set_fill_color('rgb(%d, %d, 0)'%(r, g))
       filled_rectangle((50+j*30, 50+i*30), 30, 30)
</pre>

<h2><a id="canvas1a">Styled canvas with sized editor, line numbers and different size drawing area:</a><br/> 
<code>&lt;pre title="canvas size=(5, 60) linenumber area=(300, 300)"&gt;</code></h2>
<pre title="canvas size=(5, 60) linenumber area=(300, 300)">
for i in range(10):
   for j in range(10):
       g = 255 - 25*i
       b = 255 - 25*j
       set_fill_color('rgb(0, %d, %d)'%(g, b))
       filled_rectangle((j*30, i*30), 30, 30)
</pre>

<h2><a id="plot1">Styled plot with sized editor, line numbers and different size drawing area:</a><br/> 
<code>&lt;pre title="plot size=(5, 60) linenumber area=(300, 300)"&gt;</code></h2>
<pre title="plot size=(5, 60) linenumber area=(300, 300)">
prepare_graph(x_range=(0, 10), y_range=(-1, 1))
import math
set_line_colour('red')
plot_function(math.sin)
</pre>

<h2><a id="plot1a">plot with no code displayed in &lt;pre&gt;:</a><br/> 
<code>&lt;pre title="plot no-pre size=(5, 60) area=(400, 200)"&gt;</code></h2>
<pre title="plot no-pre size=(5, 60) area=(400, 200)">
prepare_graph(x_range=(0, 10), y_range=(-1, 1))
import math
set_line_colour('red')
plot_function(math.sin)
</pre>

<h2><a id="external1">External application with console (Python interpreter)</a><br/> 
<code>&lt;editor external no-internal console size=(4, 60)"&gt;</code></h2>
<pre title="editor external no-internal console size=(4, 60)">
import code
code.interact()
</pre>

<h2><a id="external2">External application without console (Tkinter window)</a><br/> 
<code>&lt;editor external no-internal"&gt;</code></h2>
<pre title="editor external no-internal">
from Tkinter import *
root = Tk()
w = Label(root, text="Crunchy!")
w.pack()
root.mainloop()
</pre>

<h2><a id="comment">Crunchy comment:</a><br/> 
<code>&lt;span class="vlam_comment" style="display: none"&gt;</code></h2>
<p>A hidden comment will be revealed (something should follow it):
<span class="vlam_comment" style="display: none" > Secret Crunchy comment.</span>  The rest of the text follows.
</p>

</body>
</html>

